<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>申诉</title>
		<meta name="keywords" content="知果汇" />
		<meta name="description" content="知果汇" />
		<link rel="SHORTCUT ICON" href="_IMG_/favicon.ico" />
		<link rel="stylesheet" type="text/css" href="_CSS_/reset.css">
		<link rel="stylesheet" type="text/css" href="_CSS_/common.css">
		<link rel="stylesheet" type="text/css" href="_CSS_/store_center.css"/>
		<style type="text/css">
		    html,body{width: 690px;min-width: 690px;}
		    .upload-box{padding: 20px;float: left; }
		    .upload-title{display: inline-block;width: 60px;float: left;font-size: 14px;color: #333333;}
		    .upload-list{float: left;display: inline-block;width: 590px;}
		    .upload-btn {width: 98px;height: 98px;margin: 0;border: 1px solid #e5e5e5;}
		    .upload-img{width:98px;height: 98px;position: relative;float: left;margin-right: 25px;margin-bottom: 16px;}
            .upload-btn img{display: block;width: 98px;height: 98px;}
			.upload-btn input{position: absolute;top: 0;margin: 0;width: 98px;height: 98px;border: none;opacity: 0; filter: alpha(opacity=0);cursor: pointer}			
			.upload-img p {width: 98px;font-size: 10px;line-height: 16px; margin-top: -35px;text-align: center;}
			.img-info img{width: 98px;height: 98px;}
			.file-panel {position: absolute;display: none;width: 98px;height: 98px;top: 0;overflow: hidden;z-index: 300;}
			.del_cancel {width: 98px;height: 98px;background-color: rgba( 0, 0, 0, 0.5 );}
			
			.table-btn,.table-btn:hover,.table-btn:focus{color: #ffffff;}
			.point-out{color: #999999;font-size: 14px;margin-left: 45px;float: left;width: 600px;margin-bottom: 15px;}
			.btn-box{width: 570px;text-align: center;margin-top: 20px;}
			.btn-box a {display: inline-block;height: 37px;line-height: 37px;margin: 5px 25px 0;padding: 0 30px;border: 1px solid #dedede;background-color: #fff;color: #333;border-radius: 5px;font-weight: 400;cursor: pointer;text-decoration: none;font-size: 14px;}
			.btn-box .btn-n1{border-color: #3377c0;background-color: #3377c0;color: #ffffff;}
			.mr0{margin-right:0;}
			.upload-box p{font-size: 14px;margin-bottom: 15px;}
			textarea{width: 555px;height: 180px;padding: 10px;font-size: 14px;background: #f2f2f2;outline:none;resize:none;margin-bottom: 15px}
			.upload-box p span{display: inline-block;width: 65px;}
			.upload-box p input{width: 258px;height: 38px;line-height: 38px;font-size: 14px;border: 1px solid #e5e5e5;text-indent: 15px;}
		</style>
	</head>
	<body>
		<form action="" method="post">
            <div class="upload-box">
               <p></p>
               <label class="upload-title" >问题描述:</label>
               <textarea placeholder="请输入您的问题描述" name="problem"></textarea>
               <label class="upload-title">上传:</label>
               <div class="upload-list">
               	   <div class="upload-img">
						<div class="upload-btn">
							<img src="_IMG_/upload1.png">
							<input type="file" name="upfile[]" id="file0" onchange="previewImage(this,0)" accept="image/gif, image/jpeg, image/png">
						</div>
					</div>
					<div class="upload-img">
						<div class="upload-btn">
							<img src="_IMG_/upload1.png">
							<input type="file" name="upfile[]" id="file1" onchange="previewImage(this,1)" accept="image/gif, image/jpeg, image/png">
						</div>
					</div>
					<div class="upload-img">
						<div class="upload-btn">
							<img src="_IMG_/upload1.png">
							<input type="file" name="upfile[]" id="file2" onchange="previewImage(this,2)" accept="image/gif, image/jpeg, image/png">
						</div>
					</div>
					<div class="upload-img">
						<div class="upload-btn">
							<img src="_IMG_/upload1.png">
							<input type="file" name="upfile[]" id="file3" onchange="previewImage(this,3)" accept="image/gif, image/jpeg, image/png">
						</div>
					</div>
					<div class="upload-img mr0">
						<div class="upload-btn">
							<img src="_IMG_/upload1.png">
							<input type="file" name="upfile[]" id="file4" onchange="previewImage(this,4)" accept="image/gif, image/jpeg, image/png">
						</div>
					</div>
               </div>
               <p class="point-out">注：仅支持JPG、PNG、JPEG格式，注意文件名不能有中文或空格，为了能够更快更好地解决问题，请您上传与买家沟通的记录图片，每张图片大小不超过5M</p>
               <p><span>联系人:</span><input type="text" name="nick"></p>
               <p><span>手机号码:</span><input type="text" name="phone"></p>
				<input type="hidden" name="image" >
				<input type="hidden" name="order" >
               <div class="btn-box">
               	   <a class="btn-n1" href="javascript:;" title="确认" onclick="confirm()">确认</a>
               	   <a class="btn-n2" href="javascript:;" title="取消" onclick="cancel()">取消</a>
               </div>
            </div>
		</form>
	</body>
	<script src="_JS_/jquery-1.8.3.min.js"></script>
	<script src="_JS_/jquery.base64.js"></script>
	<script src="_JS_/jquery.cookie.js"></script>
	<script src="_JS_/common.js"></script>
	<script src="_P_/layer/layer.js"></script>
	<script type="text/javascript">

		$(document).ready(function(){
			var url = window.location.href;
			var id = url.split("#")[1];
			$.ajax({
				type: "get",
				url: "/index.php/api/form/order_details",
				data: {
					'id': id,
					'type': 2
				},
				dataType: 'jsonp',
				success: function (msg) {
					if (msg.code == 200) {
						$('.upload-box').find('p').eq(0).html('订单编号:'+msg.data.order);
						$('input[name="image"]').val('serviceGoods/'+msg.data.image);
						$('input[name="order"]').val(msg.data.order);
					}
					if (msg.code == 1000) {
						layer.msg('查询失败！', {icon: 5});
					}
				}
			});

		});
	   //文件上传
	    function previewImage(obj,num){
			var filepath=$(obj).val();
			fileObj = document.getElementById('file'+num);
			value = window.URL.createObjectURL(fileObj.files[0]);
			file_size = obj.files[0].size;
			size = file_size / 1024;
			if (size > 1024*5) {
				$('#file'+num).val("");
				layer.alert('上传图片不得大于5MB', {
					closeBtn: 0
				});
			} else {
				$(obj).parents(".upload-img").prepend('<div class="img-info"><img src="'+value+'"/><div class="file-panel"><div class="del_cancel"><a class="btn table-btn" style="color: #ffffff;display: block;font-size: 18px;font-weight: bold;margin-left: 82px;height: 18px;line-height: 18px;text-decoration: none;" title="删除" href="javascript:;">×</a></div></div></div>');
				$(obj).parent(".upload-btn").hide();
				$(obj).parents(".upload-img").children('p').hide();

				$('.img-info').hover(function(){	
					$(this).find(".file-panel").show();
				},function(){
					$(this).find(".file-panel").hide();

				});
				$(".del_cancel a").on("click",function(){
					$('#file'+num).val(""); 
					$(this).parents('.upload-img').find(".upload-btn").show();
					$(this).parents('.upload-img').find(".upload-img p").show();
					$(this).parents(".img-info").remove();

				});
			}
		}
		//确认
		function confirm(obj){
			var userinfo=$.cookie('userinfo');
			if(userinfo) {
				var user_login = $.base64.decode(userinfo).split(",");
				var user_uid = user_login[0];
			}else{
				layer.msg('还未登录！', {icon: 5});
				return false;
			}
			var formData = new FormData($('form')[0]);
			formData.append('uid', user_uid);
			formData.append('status', 2);
			formData.append('type', 2);
			$.ajax({
				type: "post",
				url: "/index.php/api/form/appeal",
				data:formData,
				dataType: 'json',
				beforeSend: function () {
					var index = layer.load(1, {
						shade: [0.1, '#333333'] //0.1透明度的白色背景
					});
				},
				success: function (msg) {
					layer.closeAll();
					if (msg.code == 200) {
						parent.order_service(1);
						var index = parent.layer.getFrameIndex(window.name);
						parent.layer.close(index);	
					}
					if (msg.code == 1000) {
						layer.msg('修改失败！', {icon: 5});
					}
				},
				contentType: false, //必须false才会自动加上正确的Content-Type
				processData: false //必须false才会避开jQuery对 formdata 的默认处理
			});

		}
		//取消
		function cancel(obj){
			var index = parent.layer.getFrameIndex(window.name);
			parent.layer.close(index);
		}

	</script>
</html>
